<template>
    <div class="child">
        <h3>子组件1</h3>
        <h4>玩具： {{ toy }}</h4>
        <h4>书籍： {{ book }}</h4>  
        <button @click="minusHouse($parent)">干掉父亲一套房产</button>
    </div>
</template>

<script setup lang="ts" name="Child1">
import {ref} from 'vue'

// 数据
let toy = ref('奥特曼')
let book = ref(3)


// 方法

// 使父组件中的数据减少
function minusHouse(parent:any){
    console.log(parent,"父组件的数据")
    if(parent.house <=0) {
        return alert('没有钱了')
    }
    parent.house -= 1
}

// 把数据交给外部（宏函数）
defineExpose({toy,book})
</script>

<style scoped>
    .child{
        background-color: skyblue;
        padding: 10px;
        box-shadow: 0 0 10px black;
        border-radius: 10px;
    }
</style>